<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddTkShop ref="addShop" />
        <div class="sch_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <div class="sch_tab" @click="switchTab('/qc_shop_list')">千川店铺授权</div>
                <div class="sch_tab active">TK 店铺授权</div>
            </div>
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addShop()">添加授权</el-button>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="display_name" label="账户名称">
                </el-table-column>
                <el-table-column prop="email" label="邮箱">
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-switch @change="setAdverStatus(scope.row)" :value="scope.row.status" :active-value="1" :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="syncUser(scope.row)">店铺账户同步</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddTkShop from "./AddTkShop.vue";
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl+"qcadmin/Tiktokaccount/accountList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        syncUser(row) {
            this.$confirm(`请问是否同步`, `店铺账户同步`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl+"qcadmin/Tiktokaccount/advertiserGet",
                        {
                            core_user_id: row.core_user_id,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false
                        this.$message({
                            type: "success",
                            message: "同步成功",
                        });
                    }
                })
                .catch(() => {});
        },

        // 状态
        setAdverStatus(row) {
            let text = row.status == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}`, `${text}`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.status == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl+"qcadmin/Tiktokaccount/accountStatus",
                        {
                            core_user_id: row.core_user_id,
                            status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 添加账号
        addShop() {
            this.$refs.addShop.dialogVisible = true;
            this.$refs.addShop.getDataList();
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddTkShop,
    },
};
</script>


<style scoped>
.sch_head{
    padding: 0;
    margin: 0 20px;
    border-bottom: 0;
}
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
</style>


